<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/jquery.dataTables.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.dataTables.js"></script>
</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>

</table>
<script>
    var table = $("#example").DataTable({
        "ajax":{
            "url": "data/data.json"
//            ,"dataSrc":function (data) {
//                return data;
//            }
        } ,
        "pageLength": 20,
        "columns": [
            {"data": "name"},
            {"data": "position"},
            {"data": "office"},
            {"data": "extn"},
            {"data": "start_date"},
            {"data": "salary"}
        ],
        "searching": true, //搜索是否可用
        "lengthChange": false, //每页的条目数是否可变
        "info": false //左下角信息
    });
    $("#example_filter").hide();
    //更新表格用
//    $('#example').dataTable({
//        "filter": false,
//        "destroy": true//清除原有表格
//    });
</script>
</body>
</html>